<template>
  <el-dialog title="阅读情况" :visible.sync="visible" @close="$emit('close')" width="800px">
    <ZfwSearchForm :fileds="fileds" @onSearch="onSearch">
    </ZfwSearchForm>
    <el-table :data="tableData" border style="width: 100%" max-height="1200px">
      <el-table-column type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="readerName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="deptName" label="部门">
      </el-table-column>
      <el-table-column prop="readStatusName" label="阅读情况">
        <template #default="{ row }">
          <el-tag v-if="row.readStatus === 'READED'" type="warning">{{ row.readStatusName }}</el-tag>
          <el-tag v-else type="danger">{{ row.readStatusName }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-rowr mt20">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.pageNum"
        :page-sizes="[10, 20, 50, 100]" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
import { readOptions } from "./options";
import { readList } from "@/api/notice.js"
import { mapState, mapActions } from "vuex"
import { replaceFormData } from '@/utils/common.js'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      tableData: [],
      pages: {
        pageNum: 1,
        pageSize: 20
      },
      total: 0,
      params: {}
    }
  },
  computed: {
    ...mapState("options", ["personList"]),
    fileds() {
      return [
        {
          key: "depName",
          filedType: "Select",
          layout: {
            span: 8,
          },
          inline: true,
          itemProps: {
            prop: "title",
          },
          props: {
            placeholder: "请选择查看部门",
            options: this.personList,
            valuesType: {
              label: "orgName",
              value: "orgId"
            }
          },
        },
        {
          key: "readStatus",
          filedType: "Select",
          layout: {
            span: 8,
          },
          itemProps: {
            prop: "readStatus",
          },
          props: {
            placeholder: "请选择阅读情况",
            options: readOptions
          },
        }
      ]
    }
  },
  watch: {
    isShow() {
      this.visible = this.isShow
      if (this.isShow) {
        this.getList()
      }
    }
  },
  created() {
    this.getPerson();
  },
  methods: {
    ...mapActions("options", ["getPerson"]),
    onSearch(params) {
      this.params = params
      this.getList()
    },
    async getList() {
      const { code, data } = await readList(replaceFormData({ businessId: this.id, ...this.pages, ...this.params }))
      if (code === 200) {
        this.total = data.total
        this.tableData = data.records
      }
    },
    handleSizeChange(values) {
      this.pages.pageSize = values
      this.getList()
    },
    handleCurrentChange(values) {
      this.pages.pageNum = values
      this.getList()
    }
  }
}
</script>
